<template>
  <div class="edit-map-container">
    <div class="lng-lat-input">
      <lan-form
        :config="formConfig"
        :formData="amapData"
        class="lan-form"
      ></lan-form>
      <!-- <el-form
        inline
        label-width="100px"
        :model="amapData"
      >
        <el-form-item
          required
          label="经度"
        >
          <el-input
            size="small"
            v-model="amapData.longitude"
            placeholder="请输入经度"
          ></el-input>
        </el-form-item>
        <el-form-item
          required
          label="纬度"
        >
          <el-input
            size="small"
            v-model="amapData.latitude"
            placeholder="请输入纬度"
            @blur.prevent="bandLngLat"
          ></el-input>
        </el-form-item>
        <el-form-item
          required
          label="设备地址"
        >
          <el-input
            size="small"
            v-model="amapData.location"
          ></el-input>
        </el-form-item>
      </el-form> -->
    </div>
    <div id="local-map">
      <div class="info">
        <div class="input-item">
          <input
            size="small"
            placeholder="请根据关键词选择"
            id="tipinput"
            type="text"
          />
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import LanForm from '../../../components/lanForm';
import markerImg from '../../../assets/images/red-marker.png';
import AMap from 'AMap';
import { parse } from 'uuid';
export default {
  name: 'App',
  components: { LanForm },
  props: ['oldAmapData'],
  data() {
    markerImg;
    return {
      formConfig: {
        inline: false,
        size: 'normal',
        hideLabel: false,
        formList: [
          {
            name: 'longitude',
            label: '经度',
            type: 'input',
            placeholder: '请输入经度',
            required: true,
            tooltip: '设备所在的经度信息，不需要手动填写，可以通过地图选择',
            width: 280
          },
          {
            name: 'latitude',
            label: '纬度',
            type: 'input',
            placeholder: '请输入纬度',
            required: true,
            tooltip: '设备所在的纬度信息，不需要手动填写，可以通过地图选择',
            width: 280
          },
          {
            name: 'location',
            label: '地址',
            type: 'input',
            placeholder: '请输入地址',
            required: true,
            tooltip: '设备所在地址，不需要手动填写，可以通过地图选择',
            width: 280
          }
        ]
      },
      poslnglat: {},
      longitude: 0,
      latitude: 0,
      adcode: 0,
      map: null,
      marker: null,
      toolbar: null,
      clickListener: null,
      autoOptions: null,
      autoComplete: null,
      autoResult: [],
      keywords: '',
      searchList: [],
      geocoder: null,
      inputPosition: [],
      amapData: {
        longitude: 0,
        latitude: 0,
        adcode: 0,
        location: ''
      }
    };
  },
  mounted() {
    // 地图主体
    this.map = new AMap.Map('local-map', {
      resizeEnable: true,
      zoom: 14, //级别
      viewMode: '3D', //使用3D视图
      // center: [90, 90],
      layers: [new AMap.TileLayer.Satellite()]
    });

    // 引入插件
    // 地图缩放
    AMap.plugin(['AMap.ToolBar'], () => {
      this.map.addControl(new AMap.ToolBar());
    });

    // 引入区域编码
    AMap.plugin('AMap.Geocoder', () => {
      this.geocoder = new AMap.Geocoder({
        city: '全国'
      });
    });

    // 输入框
    AMap.plugin(['AMap.Autocomplete'], () => {
      // 实例化Autocomplete
      this.autoOptions = {
        city: '全国',
        input: 'tipinput'
      };
    });

    // 点击显示标记，并将数据拿到（打印在控制台）
    this.map.on('click', e => {
      // DOM 被点击时触发，ev 为原生事件
      this.marker ? this.map.remove(this.marker) : '';
      this.poslnglat = e.lnglat;
      this.marker = new AMap.Marker({
        position: this.poslnglat,
        icon: markerImg,
        offset: new AMap.Pixel(-13, -30),
        map: this.map
      });
      this.map.add(this.marker);
      this.map.setCenter(this.poslnglat);
      this.geocoder.getAddress(this.poslnglat, (status, result) => {
        this.adcode = result.regeocode.addressComponent.adcode;
        this.longitude = e.lnglat.getLng();
        this.latitude = e.lnglat.getLat();
        this.amapData.longitude = this.longitude;
        this.amapData.latitude = this.latitude;
        this.amapData.adcode = this.adcode;
        this.amapData.location =
          result.regeocode.addressComponent.province +
          result.regeocode.addressComponent.city +
          result.regeocode.addressComponent.district +
          result.regeocode.addressComponent.township +
          result.regeocode.addressComponent.street +
          result.regeocode.addressComponent.streetNumber;
        this.toParent();
      });
    });

    this.autoComplete = new AMap.Autocomplete(this.autoOptions);
    // // 搜索返回数据组
    // this.autoComplete.search(this.keywords, (status, result) => {});
    // 选择数据组中的地点
    this.autoComplete.on('select', e => {
      if (!e.poi.id == '') {
        this.poslnglat = e.poi.location;
        this.longitude = e.poi.location.lng;
        this.latitude = e.poi.location.lat;
        // 选择后标记出地点
        this.marker ? this.map.remove(this.marker) : '';
        this.marker = new AMap.Marker({
          position: this.poslnglat,
          icon: markerImg,
          offset: new AMap.Pixel(-13, -30),
          map: this.map
        });
        this.map.add(this.marker);
        this.map.setCenter(this.poslnglat);
        this.geocoder.getAddress(this.poslnglat, (status, result) => {
          this.adcode = result.regeocode.addressComponent.adcode;
          this.amapData.adcode = parseInt(this.adcode);
          this.amapData.longitude = this.longitude;
          this.amapData.latitude = this.latitude;
          if (status == 'complete') {
            this.amapData.location =
              result.regeocode.addressComponent.province +
              result.regeocode.addressComponent.city +
              result.regeocode.addressComponent.district +
              result.regeocode.addressComponent.township +
              result.regeocode.addressComponent.street +
              result.regeocode.addressComponent.streetNumber;
          }
          this.toParent();
        });
      } else {
        this.map.setCity(e.poi.name);
      }
    });
  },
  watch: {
    'oldAmapData.latitude': {
      handler() {
        this.amapData.longitude = this.oldAmapData.longitude;
        this.amapData.latitude = this.oldAmapData.latitude;
        this.amapData.adcode = this.oldAmapData.areaCode;
        this.amapData.location = this.oldAmapData.location;
      }
    },
    'amapData.latitude': {
      handler() {
        this.toParent();
      }
    },
    'amapData.longitude': {
      handler() {
        this.toParent();
      }
    },
    'amapData.location': {
      handler() {
        this.toParent();
      }
    }
  },
  methods: {
    // 点击按钮添加mark
    // searchMap() {
    //   this.marker ? this.map.remove(this.marker) : '';
    //   this.marker = new AMap.Marker({
    //     position: this.poslnglat,
    //     map: this.map
    //   });
    //   this.map.add(this.marker);
    //   this.map.setCenter(this.poslnglat);
    //   this.geocoder.getAddress(this.poslnglat, (status, result) => {
    //     this.adcode = result.regeocode.addressComponent.adcode;
    //     this.amapData.adcode = parseInt(this.adcode);
    //     this.amapData.longitude = this.longitude;
    //     this.amapData.latitude = this.latitude;
    //     this.amapData.location =
    //       result.regeocode.addressComponent.province +
    //       result.regeocode.addressComponent.city +
    //       result.regeocode.addressComponent.district +
    //       result.regeocode.addressComponent.township +
    //       result.regeocode.addressComponent.street +
    //       result.regeocode.addressComponent.streetNumber;
    //     this.toParent();
    //   });
    // },
    // 自输入经纬度
    bandLngLat() {
      this.marker ? this.map.remove(this.marker) : '';
      this.marker = new AMap.Marker({
        position: new AMap.LngLat(this.amapData.longitude, this.amapData.latitude),
        icon: markerImg,
        offset: new AMap.Pixel(-13, -30),
        map: this.map
      });
      this.map.add(this.marker);
      this.inputPosition = [this.amapData.longitude, this.amapData.latitude];
      this.map.setCenter(this.inputPosition);
      this.geocoder.getAddress(this.inputPosition, (status, result) => {
        this.adcode = result.regeocode.addressComponent.adcode;
        this.amapData.adcode = parseInt(this.adcode);
        this.amapData.latitude;
        this.amapData.longitude;
        this.amapData.location =
          result.regeocode.addressComponent.province +
          result.regeocode.addressComponent.city +
          result.regeocode.addressComponent.district +
          result.regeocode.addressComponent.township +
          result.regeocode.addressComponent.street +
          result.regeocode.addressComponent.streetNumber;
        this.toParent();
      });
    },
    toParent() {
      this.$emit('amapData', this.amapData);
    },
    judgeEditOrAdd() {
      if (this.oldAmapData) {
        this.amapData.longitude = this.oldAmapData.longitude;
        this.amapData.latitude = this.oldAmapData.latitude;
        this.amapData.adcode = this.oldAmapData.areaCode;
        this.amapData.location = this.oldAmapData.location;
        this.map.setCenter(new AMap.LngLat(this.amapData.longitude, this.amapData.latitude));
        this.marker = new AMap.Marker({
          position: new AMap.LngLat(this.amapData.longitude, this.amapData.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          map: this.map,
          icon: markerImg,
          offset: new AMap.Pixel(-13, -30)
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.lan-form {
  display: flex;
  flex-direction: row;
  margin-bottom: 50px;
}
.lng-lat-input {
  .el-input {
    width: 300px;
  }
  .el-form-item {
    margin-right: 20px;
  }
}
.edit-map-container {
  position: relative;
  width: 100%;
  height: 100%;
  .lng-lat-input {
  }
  #local-map {
    .info {
      .input-item {
        #tipinput {
        }
      }
    }
  }
}
#local-map {
  position: relative;
  width: 100%;
  height: 100%;
}
html {
  font-size: 12px;
}
* {
  box-sizing: border-box;
}
// .input-textarea {
//   color: grey;
//   height: 8em;
//   overflow: auto;
//   border-radius: 0.4rem;
//   border: 1px solid #ced4da;
//   margin-bottom: 1rem;
// }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  line-height: 1.5;
  font-weight: 300;
  color: #111213;
}

hr {
  margin: 0.5rem 0;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

label {
  display: inline-block;
  margin-bottom: 0.4rem;
}

label,
.btn {
  margin-left: 0;
  font-size: 1rem;
}

button,
input,
select {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow: visible;
  text-transform: none;
}

[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0 0.5rem 0 0;
}

h4 {
  font-family: inherit;
  line-height: 1.8;
  font-weight: 300;
  color: inherit;
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.btn {
  font-size: 14px;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background-color: transparent;
  background-image: none;
  color: #fff;
  border-color: #2c83b1;
  background-color: #2c83b1;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  border-radius: 4px;
  -webkit-appearance: button;
  cursor: pointer;
  margin-left: 10px;
}

// .btn:hover {
//   color: #fff;
//   background-color: #2c83b1;
//   border-color: #2c83b1;
// }

.input-item {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.input-item:last-child {
  margin-bottom: 0;
}

.input-item > select,
.input-item > input[type='text'],
.input-item > input[type='date'] {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.input-item > select:not(:last-child),
.input-item > input[type='text']:not(:last-child),
.input-item > input[type='date']:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-item > select:not(:first-child),
.input-item > input[type='text']:not(:first-child),
.input-item > input[type='date']:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-item-prepend {
  margin-right: -1px;
}

.input-item-text,
input[type='text'],
input[type='date'],
select {
  height: calc(2.2rem + 2px);
}

.input-item-text {
  width: 6rem;
  text-align: justify;
  padding: 0.4rem 0.7rem;
  display: inline-block;
  text-justify: distribute-all-lines;
  /*ie6-8*/
  text-align-last: justify;
  /* ie9*/
  -moz-text-align-last: justify;
  /*ff*/
  -webkit-text-align-last: justify;
  /*chrome 20+*/
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.input-item-text input[type='checkbox'],
.input-item-text input[type='radio'] {
  margin-top: 0;
}

.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 22rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}

.input-text {
  line-height: 2rem;
  margin-right: 2rem;
}

.info hr {
  margin-right: 0;
  margin-left: 0;
  border-top-color: grey;
}

.info {
  z-index: 999;
  // padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  position: absolute;
  top: 1rem;
  background-color: white;
  width: auto;
  min-width: 22rem;
  border-width: 0;
  right: 1rem;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.code {
  left: 1.5rem;
  right: 1.5rem;
  top: 1.5rem;
  bottom: 1.5rem;
  overflow: auto;
  margin-bottom: 0rem;
}

.code .btn {
  top: 1rem;
  position: absolute;
  right: 1rem;
}

.code .result {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  padding: 1rem;
  bottom: 1rem;
  position: absolute;
  top: 5.5rem;
  right: 1rem;
  left: 1rem;
  overflow: auto;
}

.code .status {
  color: #80adff;
  display: inline-block;
  font-size: 14px;
}

.code h4 {
  display: inline-block;
  max-width: 20rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

select,
input[type='text'],
input[type='date'] {
  display: inline-block;
  width: 100%;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat
    right 0.75rem center;
  background-size: 8px 10px;
  // border: 1px solid #ced4da;
  border: 0px;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type='text'],
input[type='date'] {
  background: #fff;
  padding: 0.375rem 0.75rem;
}

select:focus,
input[type='text']:focus,
input[type='date']:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, 0.1);
}

.btn:focus {
  outline: 0;
  box-shadow: none;
}

select:focus::-ms-value,
input[type='text']:focus::-ms-value,
input[type='date']:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

/* native toastr */
.native-toast {
  position: fixed;
  background-color: rgba(50, 50, 50, 0.8);
  border-radius: 33px;
  color: white;
  left: 50%;
  text-align: center;
  padding: 6px 12px;
  opacity: 0;
  z-index: 99999;
  transition: transform 0.25s, opacity 0.25s, top 0.25s;
  box-sizing: border-box;
}

.native-toast-bottom {
  bottom: 50px;
  -ms-transform: translateX(-50%) translateY(50px);
  transform: translateX(-50%) translateY(50px);
}

.native-toast-bottom.native-toast-shown {
  opacity: 1;
  -ms-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
}

.native-toast-bottom.native-toast-edge {
  bottom: 0;
}

.native-toast-top {
  top: 50px;
  -ms-transform: translateX(-50%) translateY(-50px);
  transform: translateX(-50%) translateY(-50px);
}

.native-toast-top.native-toast-shown {
  opacity: 1;
  -ms-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
}

.native-toast-top.native-toast-edge {
  top: 0;
}

.native-toast-center {
  top: 0;
  -ms-transform: translateX(-50%) translateY(-50px);
  transform: translateX(-50%) translateY(-50px);
}

.native-toast-center.native-toast-shown {
  opacity: 1;
  top: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.native-toast-edge {
  border-radius: 0;
  width: 100%;
  text-align: left;
}

@media screen and (min-width: 40rem) {
  .native-toast:not(.native-toast-edge) {
    max-width: 18rem;
  }
}

/*
  max-width does not seem to work in small screen?
*/

/*@media screen and (max-width: 768px) {
  .native-toast:not(.native-toast-edge) {
    max-width: 400px;
  }
}

@media screen and (max-width: 468px) {
  .native-toast:not(.native-toast-edge) {
    max-width: 300px;
  }
}*/

/* types */

.native-toast-error {
  background-color: #d92727;
  color: white;
}

.native-toast-success {
  background-color: #62a465;
  color: white;
}

.native-toast-warning {
  background-color: #fdaf17;
  color: white;
}

.native-toast-info {
  background-color: #5060ba;
  color: white;
}

[class^='native-toast-icon-'] {
  vertical-align: middle;
  margin-right: 8px;
}

[class^='native-toast-icon-'] svg {
  width: 16px;
  height: 16px;
}
</style>
